<template>
  <div class="doctor-records">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <h2>就诊记录</h2>
          <div class="header-actions">
            <el-button type="primary" @click="refreshData">
              <el-icon><Refresh /></el-icon> 刷新数据
            </el-button>
          </div>
        </div>
      </template>
      
      <!-- 搜索和筛选区域 -->
      <div class="filter-container">
        <el-form :inline="true" :model="searchForm" ref="searchFormRef">
          <el-form-item label="患者姓名">
            <el-input v-model="searchForm.patientName" placeholder="请输入患者姓名" clearable />
          </el-form-item>
          <el-form-item label="诊断结果">
            <el-input v-model="searchForm.diagnosis" placeholder="请输入诊断结果" clearable />
          </el-form-item>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              :shortcuts="dateShortcuts"
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 记录列表 -->
      <el-table
        v-loading="loading"
        :data="recordsList"
        style="width: 100%"
        border
        stripe
        row-key="id"
        :header-cell-style="{background:'#f5f7fa', color:'#606266', fontWeight: 'bold'}"
        :cell-style="{padding: '12px 0'}"
      >
        <el-table-column label="记录ID" prop="recordId" min-width="120" align="center">
          <template #default="scope">
            {{ scope.row.recordId || scope.row.id || scope.row._id || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="患者姓名" prop="patientName" min-width="120" align="center">
          <template #default="scope">
            {{ scope.row.patientName || scope.row.patient?.name || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" min-width="80" align="center">
          <template #default="scope">
            <el-tag size="small" :type="getGender(scope.row) === 'male' ? 'primary' : 'danger'">
              {{ getGender(scope.row) === 'male' ? '男' : '女' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="就诊日期" prop="date" min-width="130" align="center">
          <template #default="scope">
            {{ formatRecordDate(scope.row) || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="主诉" prop="chiefComplaint" min-width="150" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.chiefComplaint || scope.row.complaint || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="诊断结果" prop="diagnosis" min-width="150" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span class="highlight-text">{{ formatDiagnosis(scope.row.diagnosis) || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="120" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-button 
                size="small" 
                type="primary" 
                @click="viewRecord(scope.row)"
                plain
              >
                <el-icon><Document /></el-icon> 详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 记录详情对话框 -->
    <el-dialog
      v-model="recordDialogVisible"
      title="就诊记录详情"
      width="1000px"
      destroy-on-close
      top="3vh"
    >
      <div v-loading="detailLoading">
        <!-- 基本信息区域 -->
        <el-row :gutter="20" style="margin-bottom: 15px;">
          <el-col :span="12">
            <el-card shadow="never" class="info-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Document /></el-icon>
                  <span>基本信息</span>
                </div>
              </template>
              <el-descriptions :column="1" border size="default">
                <el-descriptions-item label="患者姓名">
                  <span class="bold-text">{{ currentRecord.patientName }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="就诊日期">
                  {{ formatDate(currentRecord.date) }}
                </el-descriptions-item>
                <el-descriptions-item label="体格检查">
                  {{ formatPhysicalExam(currentRecord.physicalExam) || currentRecord.examination || '无' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          
          <el-col :span="12">
            <el-card shadow="never" class="info-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Connection /></el-icon>
                  <span>关联数据</span>
                </div>
              </template>
              <div class="related-summary">
                <div class="related-item">
                  <el-icon class="related-icon"><Document /></el-icon>
                  <span>关联处方：{{ currentRecord.relatedPrescriptions?.length || 0 }} 个</span>
                  <el-button 
                    type="primary" 
                    size="default"
                    @click="viewRelatedPrescriptions"
                    :disabled="!currentRecord.relatedPrescriptions || currentRecord.relatedPrescriptions.length === 0"
                    plain
                  >
                    查看
                  </el-button>
                </div>
                <div class="related-item">
                  <el-icon class="related-icon"><Document /></el-icon>
                  <span>关联医嘱：{{ currentRecord.relatedMedicalOrders?.length || 0 }} 个</span>
                  <el-button 
                    type="success" 
                    size="default"
                    @click="viewRelatedMedicalOrders"
                    :disabled="!currentRecord.relatedMedicalOrders || currentRecord.relatedMedicalOrders.length === 0"
                    plain
                  >
                    查看
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- 病史信息区域 -->
        <el-card shadow="never" class="info-card" style="margin-bottom: 15px;">
          <template #header>
            <div class="card-header">
              <el-icon><Document /></el-icon>
              <span>病史信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border size="default">
            <el-descriptions-item label="主诉">
              {{ currentRecord.chiefComplaint || '无' }}
            </el-descriptions-item>
            <el-descriptions-item label="现病史">
              {{ currentRecord.presentIllness || '无' }}
            </el-descriptions-item>
            <el-descriptions-item label="既往史">
              {{ currentRecord.pastHistory || '无' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <!-- 诊疗信息区域 -->
        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header">
              <span>诊疗信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border size="default">
            <el-descriptions-item label="诊断结果">
              <span class="highlight-text">{{ formatDiagnosis(currentRecord.diagnosis) || '无' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="治疗方案">
              {{ currentRecord.treatmentPlan || currentRecord.treatment || '无' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <div class="dialog-footer">
          <el-button @click="recordDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="printRecord" :disabled="detailLoading">
            <el-icon><Printer /></el-icon> 打印记录
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { medicalRecordAPI, doctorAPI } from '@/utils/api'
import { formatDate } from '@/utils/date'
import { useUserStore } from '@/stores/user'
import { Refresh, Document, Printer, Connection } from '@element-plus/icons-vue'

// 路由实例
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 数据加载状态
const loading = ref(false)
const detailLoading = ref(false)

// 表格数据
const recordsList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 对话框状态
const recordDialogVisible = ref(false)

// 当前选中的记录
const currentRecord = ref({})

// 搜索表单
const searchFormRef = ref(null)
const searchForm = reactive({
  patientName: '',
  diagnosis: '',
  startDate: '',
  endDate: ''
})

// 日期范围
const dateRange = ref([])

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 监听日期范围变化
const updateDateRange = computed(() => {
  if (dateRange.value && dateRange.value.length === 2) {
    searchForm.startDate = dateRange.value[0]
    searchForm.endDate = dateRange.value[1]
  } else {
    searchForm.startDate = ''
    searchForm.endDate = ''
  }
})

// 获取医生ID
const getDoctorId = async () => {
  try {
    // 获取当前登录用户信息
    const userInfo = userStore.userInfo
    
    // 如果userInfo中有doctorId，直接使用
    if (userInfo && (userInfo.doctorId || userInfo.doctor)) {
      return userInfo.doctorId || userInfo.doctor
    }
    
    // 获取用户ID
    const userId = userStore.userId || userInfo?.id || userInfo?._id
    
    if (!userId) {
      ElMessage.error('用户未登录或无法获取用户ID')
      return null
    }

    // 通过用户ID获取医生信息
    const res = await doctorAPI.getDoctorByUserId(userId)
    
    if (res.success && res.data) {
      return res.data.id || res.data._id
    } else {
      // 尝试从window对象获取
      if (window.doctorId) {
        return window.doctorId
      }
      
      ElMessage.error('获取医生信息失败')
      return null
    }
  } catch (error) {
    console.error('获取医生ID失败:', error)
    ElMessage.error('获取医生信息失败，请重新登录')
    return null
  }
}

// 获取性别
const getGender = (row) => {
  // 考虑多种可能的数据结构
  if (row.gender) return row.gender
  if (row.patient && row.patient.gender) return row.patient.gender
  if (row.patientGender) return row.patientGender
  // 默认返回
  return 'female' // 默认值
}

// 格式化记录日期
const formatRecordDate = (row) => {
  // 考虑多种可能的数据结构
  if (row.date) return formatDate(row.date)
  if (row.recordDate) return formatDate(row.recordDate)
  if (row.visitDate) return formatDate(row.visitDate)
  if (row.createdAt) return formatDate(row.createdAt)
  return null
}

// 格式化体格检查数据
const formatPhysicalExam = (physicalExam) => {
  if (!physicalExam || typeof physicalExam !== 'object') return ''
  
  const examItems = []
  
  // 处理各个检查项目
  if (physicalExam.bloodPressure) {
    examItems.push(`血压：${physicalExam.bloodPressure}`)
  }
  if (physicalExam.pulse) {
    examItems.push(`脉搏：${physicalExam.pulse}`)
  }
  if (physicalExam.temperature) {
    examItems.push(`体温：${physicalExam.temperature}`)
  }
  if (physicalExam.height) {
    examItems.push(`身高：${physicalExam.height}`)
  }
  if (physicalExam.weight) {
    examItems.push(`体重：${physicalExam.weight}`)
  }
  
  return examItems.length > 0 ? examItems.join('；') : ''
}

// 格式化诊断结果
const formatDiagnosis = (diagnosis) => {
  try {
    // 如果是字符串，可能是JSON格式
    if (typeof diagnosis === 'string') {
      // 尝试解析JSON字符串
      if (diagnosis.trim().startsWith('[') || diagnosis.trim().startsWith('{')) {
        try {
          const parsed = JSON.parse(diagnosis)
          return formatDiagnosis(parsed) // 递归处理解析后的数据
        } catch (e) {
          // 如果不是有效JSON，直接返回字符串
          return diagnosis
        }
      }
      return diagnosis
    }
    
    // 如果是数组格式
    if (Array.isArray(diagnosis)) {
      return diagnosis.map(item => {
        if (typeof item === 'string') {
          return item
        } else if (typeof item === 'object' && item.name) {
          return item.name
        } else if (typeof item === 'object') {
          return Object.values(item).join(' - ')
        }
        return String(item)
      }).join('、')
    }
    
    // 如果是对象格式
    if (typeof diagnosis === 'object' && diagnosis !== null) {
      if (diagnosis.name) {
        return diagnosis.name
      }
      // 如果是包含多个诊断的对象
      return Object.values(diagnosis).filter(v => v && typeof v === 'string').join('、')
    }
    
    return String(diagnosis)
  } catch (error) {
    console.error('格式化诊断失败:', error)
    return diagnosis ? String(diagnosis) : '--'
  }
}

// 处理API返回的数据，标准化字段
const processRecordData = (data) => {
  if (!Array.isArray(data)) return []
  
  return data.map(item => {
    // 保留原始数据，只添加标准化字段用于兼容性
    return {
      ...item,  // 保留所有原始字段
      // 添加标准化字段用于兼容性（不覆盖原始字段）
      id: item.id || item._id || item.recordId,
      recordId: item.recordId || item.id || item._id,
      patientName: item.patientName || (item.patient ? item.patient.name : null) || '测试用户',
      // 只有在原始字段不存在时才添加标准化字段
      ...((!item.gender) && { gender: getGender(item) || getGender(item.patient) }),
      ...((!item.date) && { date: formatRecordDate(item) || formatRecordDate(item.patient) }),
      // 保留原始数据引用
      original: item
    }
  })
}

// 加载就诊记录
const loadRecords = async () => {
  loading.value = true
  try {
    const doctorId = await getDoctorId()
    if (!doctorId) {
      loading.value = false
      return
    }
    
    // 构建查询参数
    const params = {
      doctorId,
      page: currentPage.value,
      limit: pageSize.value,
      ...searchForm
    }
    
    // 移除空字段
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key]
      }
    })
    
    // 检查是否有ID参数，如果有则直接查询单条记录
    if (route.query.id) {
      const id = route.query.id
      viewRecordById(id)
    }
    
    // 调用API获取医生的就诊记录列表
    const res = await medicalRecordAPI.getMedicalRecords(params)
    
    if (res.success && res.data) {
      // 处理数据 - 使用标准化函数处理
      const rawData = res.data.records || res.data.items || res.data || []
      recordsList.value = processRecordData(rawData)
      total.value = res.data.total || recordsList.value.length
      
      // 调试输出
      console.log('原始记录数据:', rawData)
      console.log('处理后记录数据:', recordsList.value)
    } else {
      ElMessage.error('获取就诊记录失败')
    }
  } catch (error) {
    console.error('加载就诊记录失败:', error)
    ElMessage.error('加载就诊记录失败')
  } finally {
    loading.value = false
  }
}

// 搜索方法
const handleSearch = () => {
  currentPage.value = 1
  loadRecords()
}

// 重置搜索
const resetSearch = () => {
  searchFormRef.value.resetFields()
  dateRange.value = []
  handleSearch()
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  loadRecords()
}

// 当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  loadRecords()
}

// 刷新数据
const refreshData = () => {
  loadRecords()
}

// 查看记录详情
const viewRecord = async (row) => {
  detailLoading.value = true
  recordDialogVisible.value = true
  
  try {
    let record = row
    
    // 如果没有完整数据，先获取医疗记录详情
    if (row.presentIllness === undefined || row.pastHistory === undefined) {
      const recordRes = await medicalRecordAPI.getMedicalRecord(row.id)
      if (recordRes.success && recordRes.data) {
        record = recordRes.data
      }
    }
    
    // 保留原始记录的完整数据，只添加必要的关联数据字段
    currentRecord.value = {
      ...record,  // 保留所有原始字段
      // 只添加关联数据字段
      relatedPrescriptions: [],
      relatedMedicalOrders: []
    }
    
    // 调试信息
    console.log('完整的医疗记录数据:', currentRecord.value)
    console.log('treatmentPlan值:', currentRecord.value.treatmentPlan)
    console.log('physicalExam值:', currentRecord.value.physicalExam)
    
    // 如果治疗方案还是空的，尝试直接从原始数据中查找
    if (!currentRecord.value.treatment) {
      console.log('治疗方案为空，尝试查找所有可能的字段:', {
        treatmentPlan: record.treatmentPlan,
        treatment: record.treatment,
        plan: record.plan,
        therapy: record.therapy,
        allKeys: Object.keys(record)
      })
    }
    
    // 获取关联数据（处方和医嘱）
    try {
      const relatedRes = await medicalRecordAPI.getRelatedData(record.id || record._id || row.id)
      if (relatedRes.success && relatedRes.data) {
        // 适配后端返回的数据结构
        currentRecord.value.relatedPrescriptions = relatedRes.data.prescriptions?.items || relatedRes.data.prescriptions || []
        currentRecord.value.relatedMedicalOrders = relatedRes.data.medicalOrders?.items || relatedRes.data.medical_orders?.items || relatedRes.data.medical_orders || []
        
        console.log('关联数据加载成功:', {
          prescriptions: currentRecord.value.relatedPrescriptions.length,
          medicalOrders: currentRecord.value.relatedMedicalOrders.length
        })
        console.log('处方数据:', currentRecord.value.relatedPrescriptions)
        console.log('医嘱数据:', currentRecord.value.relatedMedicalOrders)
      }
    } catch (error) {
      console.warn('获取关联数据失败，仍显示基本信息:', error)
    }
    
  } catch (error) {
    console.error('获取记录详情失败:', error)
    ElMessage.error('获取记录详情失败')
  } finally {
    detailLoading.value = false
  }
}

// 通过ID查看记录
const viewRecordById = (id) => {
  detailLoading.value = true
  
  medicalRecordAPI.getMedicalRecord(id)
    .then(res => {
      if (res.success && res.data) {
        currentRecord.value = res.data
        recordDialogVisible.value = true
      } else {
        ElMessage.error('获取记录详情失败')
      }
    })
    .catch(err => {
      console.error('获取记录详情失败:', err)
      ElMessage.error('获取记录详情失败')
    })
    .finally(() => {
      detailLoading.value = false
    })
}

// 查看关联处方
const viewRelatedPrescriptions = () => {
  if (!currentRecord.value.relatedPrescriptions || currentRecord.value.relatedPrescriptions.length === 0) {
    ElMessage.warning('暂无关联处方')
    return
  }
  
  // 跳转到医生工作站的处方查看页面
  router.push({
    path: '/portal/doctor/prescriptions',
    query: {
      medicalRecordId: currentRecord.value.id || currentRecord.value._id,
      patientName: currentRecord.value.patientName,
      recordDate: currentRecord.value.date
    }
  })
}

// 查看关联医嘱
const viewRelatedMedicalOrders = () => {
  if (!currentRecord.value.relatedMedicalOrders || currentRecord.value.relatedMedicalOrders.length === 0) {
    ElMessage.warning('暂无关联医嘱')
    return
  }
  
  // 跳转到医生工作站的医嘱查看页面
  router.push({
    path: '/portal/doctor/medical-orders',
    query: {
      medicalRecordId: currentRecord.value.id || currentRecord.value._id,
      patientName: currentRecord.value.patientName,
      recordDate: currentRecord.value.date
    }
  })
}

// 打印记录
const printRecord = () => {
  // 创建打印窗口
  const printWindow = window.open('', '_blank')
  if (!printWindow) {
    ElMessage.warning('请允许弹出窗口以打印记录')
    return
  }
  
  // 构建打印内容
  const printContent = `
    <html>
      <head>
        <title>就诊记录 - ${currentRecord.patientName}</title>
        <style>
          body { font-family: Arial, sans-serif; margin: 20px; }
          h1 { text-align: center; margin-bottom: 20px; }
          .header { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; }
          .info-item { margin-bottom: 10px; }
          .label { font-weight: bold; display: inline-block; width: 100px; }
          .footer { margin-top: 30px; border-top: 1px solid #ddd; padding-top: 10px; text-align: right; }
        </style>
      </head>
      <body>
        <h1>就诊记录</h1>
        <div class="header">
          <div class="info-item"><span class="label">患者姓名：</span>${currentRecord.patientName}</div>
          <div class="info-item"><span class="label">就诊日期：</span>${formatDate(currentRecord.date)}</div>
        </div>
        <div class="info-item"><span class="label">主诉：</span>${currentRecord.chiefComplaint || '无'}</div>
        <div class="info-item"><span class="label">现病史：</span>${currentRecord.presentIllness || '无'}</div>
        <div class="info-item"><span class="label">既往史：</span>${currentRecord.pastHistory || '无'}</div>
        <div class="info-item"><span class="label">检查结果：</span>${currentRecord.examination || '无'}</div>
        <div class="info-item"><span class="label">诊断结果：</span>${currentRecord.diagnosis || '无'}</div>
        <div class="info-item"><span class="label">治疗方案：</span>${currentRecord.treatment || '无'}</div>
        <div class="info-item"><span class="label">医嘱：</span>${currentRecord.advice || '无'}</div>
        <div class="footer">
          <div>医生签名：__________________</div>
          <div>日期：${new Date().toLocaleDateString()}</div>
        </div>
      </body>
    </html>
  `
  
  // 写入打印内容并打印
  printWindow.document.open()
  printWindow.document.write(printContent)
  printWindow.document.close()
  
  // 等待资源加载完成后打印
  setTimeout(() => {
    printWindow.print()
    printWindow.close()
  }, 500)
}

// 页面加载时获取数据
onMounted(() => {
  loadRecords()
})
</script>

<style scoped>
.doctor-records {
  width: 100%;
  overflow-x: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.filter-container {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.pagination-container {
  text-align: right;
  padding-top: 20px;
}

.medication-title {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.prescription-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.prescription-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.prescription-info {
  color: #606266;
  line-height: 1.5;
}

.prescription-footer {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  color: #606266;
  line-height: 1.5;
}

.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.bold-text {
  font-weight: 600;
  color: #303133;
  font-size: 15px;
}

.highlight-text {
  font-weight: 600;
  color: #409eff;
  font-size: 15px;
}

/* 表格样式优化 */
:deep(.el-table) {
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

:deep(.el-table__header) {
  font-weight: bold;
}

:deep(.el-table .cell) {
  padding: 8px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

:deep(.el-button.is-plain) {
  transition: all 0.3s;
}

:deep(.el-button.is-plain:not(.is-disabled):hover) {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .filter-container .el-form {
    display: flex;
    flex-direction: column;
  }
  
  .filter-container .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-buttons .el-button {
    width: 100%;
    margin-left: 0;
    margin-bottom: 5px;
  }
}

.related-data-section {
  margin-top: 20px;
}

.related-data-section h4 {
  margin-bottom: 15px;
  color: #409EFF;
}

.related-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-card {
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: all 0.3s;
}

.action-card:not(.disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  margin-right: 10px;
}

.card-info {
  flex: 1;
}

.card-info h5 {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.card-info p {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.info-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s;
  margin-bottom: 12px;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-card .card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #409EFF;
  font-size: 16px;
}

.info-card .card-header span {
  margin-left: 8px;
}

/* 优化描述列表样式 */
:deep(.el-descriptions) {
  font-size: 14px;
}

:deep(.el-descriptions__label) {
  font-weight: 600 !important;
  color: #606266 !important;
  font-size: 14px !important;
  width: 100px !important;
}

:deep(.el-descriptions__content) {
  font-size: 14px !important;
  color: #303133 !important;
  line-height: 1.6 !important;
}

:deep(.el-descriptions__cell) {
  padding: 12px 16px !important;
}

.related-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

.related-item span {
  flex: 1;
  margin: 0 12px;
  font-size: 15px;
  color: #303133;
  font-weight: 500;
}

.related-icon {
  color: #409EFF;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .related-summary {
    flex-direction: column;
    gap: 10px;
  }
  
  .related-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 15px;
  }
  
  .related-item span {
    font-size: 14px;
  }
}
</style> 